<template>
  <div class="about_us">
    <!-- 导航 -->
    <div class="sub_nav">
      <div class="img">
        <el-image
          style="height:100%;width:inherit"
          :src="sub_nav_image"
          fit="cover"
        ></el-image>
        <div class="front_title">
          <p>产品</p>
          <p>
            用手作的温度，传递中国传统美食
          </p>
        </div>
      </div>

      <div class="sub_title">
        <div>
          <span @click="to_sec('#anchor01')">爆款产品</span>
          <span @click="to_sec('#anchor02')">产品展示</span>
          <span @click="to_sec('#anchor03')">精选好料</span>
          <span @click="to_sec('#anchor04')">独特工艺</span>
          <span @click="to_sec('b')">联系我们</span>
        </div>
      </div>
      <transition name="ceiling_transition">
        <div v-show="sub_title_show" class="sub_title sub_title_show">
          <div>
            <span @click="to_sec('#anchor01')">爆款产品</span>
            <span @click="to_sec('#anchor02')">产品展示</span>
            <span @click="to_sec('#anchor03')">精选好料</span>
            <span @click="to_sec('#anchor04')">独特工艺</span>
            <span @click="to_sec('b')">联系我们</span>
          </div>
        </div>
      </transition>
    </div>

    <!-- 爆款产品 -->
    <div id="anchor01" class="background">
      <p class="title01">爆款产品</p>
      <p class="title02">EXPLOSIVE PRODUCTS</p>
      <p class="title03"></p>
      <p class="title04">
        酱香包，是三两的明星招牌，浓郁的酱香气息，<br />
        是胶东人热爱的咸香味道。
      </p>
      <div class="carousel_content">
        <!-- 爆款包子轮播 -->
        <el-carousel
          arrow="never"
          indicator-position="outside"
          class="carousel"
          @change="carousalchange"
        >
          <el-carousel-item
            v-for="(item, index) in hot_display_array_to_show"
            :key="index"
            class="carousel_item"
          >
            <img style="height:100%;width:100%" :src="item.product_image" />
          </el-carousel-item>
        </el-carousel>
        <div class="recomend_show">
          <p class="recomend_show_p1">爆款推荐</p>
          <p class="recomend_show_p2" v-html="recommend_show.title"></p>
          <p class="recomend_show_p3" v-html="recommend_show.content"></p>
          <p class="recomend_show_p4">${{ recommend_show.price }}</p>
        </div>
      </div>
    </div>

    <!-- 包子展示&&其他展示 -->
    <div id="anchor02" class="baozi_other_show">
      <div class="select">
        <div class="baozi"><span @click="baozi_display">包子</span></div>
        <div class="other"><span @click="other_display">其他</span></div>
      </div>

      <!-- 展示包子 -->
      <div v-show="baozi_show" class="display">
        <transition-group mode="out-in" name="carousal_move" class="baozi_show">
          <el-card
            shadow="never"
            v-for="(item, index) in baozi_display_array_to_show"
            :key="index"
            :body-style="{ padding: '0px' }"
            class="el_card-item"
          >
            <img :src="item.product_image" />
            <div class="el_card_item_content">
              <p>{{ item.product_name }}</p>
              <p>{{ item.product_title }}</p>
            </div>
          </el-card>
        </transition-group>

        <div class="indicator_circle">
          <div
            v-for="(item, index) in baozi_indicator_count"
            ref="baozi_indicator_circle_item"
            :key="index"
            @click="baozi_indicator_click(item, $event)"
            class="indicator_circle_item"
          ></div>
        </div>
      </div>

      <!-- 展示其他 -->
      <div v-show="other_show" class="display">
        <transition-group mode="out-in" name="carousal_move" class="baozi_show">
          <el-card
            shadow="never"
            v-for="(item, index) in other_display_array_to_show"
            :key="index"
            :body-style="{ padding: '0px' }"
            class="el_card-item"
          >
            <img :src="item.product_image" />
            <div class="el_card_item_content">
              <p>{{ item.product_name }}</p>
              <p>{{ item.product_title }}</p>
            </div>
          </el-card>
        </transition-group>

        <div class="indicator_circle">
          <div
            v-for="(item, index) in other_indicator_count"
            ref="other_indicator_circle_item"
            :key="index"
            @click="other_indicator_click(item, $event)"
            class="indicator_circle_item"
          ></div>
        </div>
      </div>
    </div>

    <!-- 精选好料 -->
    <div id="anchor03" class="selected_materials">
      <p class="title01">精选好料</p>
      <p class="title02">SELECTED MATERIALS</p>
      <p class="title03"></p>
      <p class="title05">店铺vi形象</p>
      <p class="title04">
        好食材才会有好味道，三两对于每份原料坚持不妥协、不断颠覆、不断死磕的态度，<br />
        这种近乎偏执的要求也是心怀对食物、食材的敬畏之意
      </p>
      <div class="materials_display">
        <div class="materials">
          <div class="img">
            <el-image
              style="height:inherit;"
              :src="materials_image01"
              fit="cover"
            ></el-image>
          </div>
          <div class="materials_show">
            <p class="materials_title01">健康营养</p>
            <p class="materials_title02">五得利面粉</p>
            <p class="materials_title03">
              选用五得利七星强筋雪晶粉，精选强筋优质小麦，提取10%麦芯部分精致而成，自然白，营养更健康
            </p>
            <p class="materials_title04"></p>
          </div>
        </div>
        <div class="materials">
          <div class="img">
            <el-image
              style="height:inherit;"
              :src="materials_image02"
              fit="cover"
            ></el-image>
          </div>
          <div class="materials_show">
            <p class="materials_title01">全程可溯</p>
            <p class="materials_title02">龙大肉食</p>
            <p class="materials_title03">
              统一采用农大肉食，品牌肉源， 全程可追溯，吃得更放心
            </p>
            <p class="materials_title04"></p>
          </div>
        </div>
        <div class="materials">
          <div class="img">
            <el-image
              style="height:inherit;"
              :src="materials_image03"
              fit="cover"
            ></el-image>
          </div>
          <div class="materials_show">
            <p class="materials_title01">新鲜配送</p>
            <p class="materials_title02">新鲜蔬菜</p>
            <p class="materials_title03">
              专业合作的蔬菜供应商， 每日新鲜配送，从源头把控品质，更新鲜更健康
            </p>
            <p class="materials_title04"></p>
          </div>
        </div>
        <div class="materials">
          <div class="img">
            <el-image
              style="height:inherit;"
              :src="materials_image04"
              fit="cover"
            ></el-image>
          </div>
          <div class="materials_show">
            <p class="materials_title01">优质调味</p>
            <p class="materials_title02">欣和调味品</p>
            <p class="materials_title03">
              选用欣和的优质调味品调馅和拌料，保证每份包子的最佳口感
            </p>
            <p class="materials_title04"></p>
          </div>
        </div>
      </div>
    </div>

    <!-- 独特工艺 -->
    <div id="anchor04" class="idea">
      <p class="title01">独特工艺</p>
      <p class="title02">BRAND IDEA</p>
      <p class="title03"></p>
      <p class="title04">
        “三两”代表了我们对于食物和生活的态度，我们希望创造的不仅仅是美食，还有美好的生活。三两时间，一餐好食，”三两“希望<br />每个人都能和时间做朋友，即使生活再忙碌，也要好好吃饭，无论是奔波的早晨，或是忙碌的工作间隙，亦或加班宵夜时…，<br />都能静下来享受这一餐一食的美好。
      </p>
      <div class="materials">
        <div class="img">
          <el-image
            style="height:inherit;"
            :src="idea_image01"
            fit="cover"
          ></el-image>
        </div>
        <div class="materials_show">
          <p class="materials_title01">包装物料展示</p>
          <p class="materials_title02">包材物料展示包材物料展示</p>
          <p class="materials_title03">
            选用触感天然纸张，更天然、更健康、更快捷，营造返璞归真的气质，打造家庭厨房的概念。
          </p>
        </div>
      </div>
      <div class="assistant">
        <div class="assistant_show">
          <p class="assistant_title01">包装物料展示</p>
          <p class="assistant_title02">包材物料展示包材物料展示</p>
          <p class="assistant_title03">
            选用触感天然纸张，更天然、更健康、更快捷，营造返璞归真的气质，打造家庭厨房的概念。
          </p>
        </div>
        <div class="img">
          <el-image
            style="height:inherit;"
            :src="idea_image02"
            fit="cover"
          ></el-image>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { productGet } from "../api/api";
export default {
  name: "about_us",
  data() {
    return {
      paramsBaozi: {
        type: ""
      },
      paramsOther: {
        type: "2"
      },
      paramsHotBaozi: {
        type: "3"
      },
      sub_title_show: false,
      carousal: [
        {
          url:
            "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          content: "烟台市芝罘区青年路10号付8"
        },
        {
          url:
            "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2973287723,4142503327&fm=26&gp=0.jpg",
          content: "烟台市芝罘区青年路10号付9"
        },
        {
          url:
            "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1864842675,3973549469&fm=26&gp=0.jpg",
          content: "烟台市芝罘区青年路10号付10"
        },
        {
          url:
            "https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3338025997,2154548943&fm=26&gp=0.jpg",
          content: "烟台市芝罘区青年路10号付11"
        },
        {
          url:
            "https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1761013875,3888483061&fm=26&gp=0.jpg",
          content: "烟台市芝罘区青年路10号付12"
        }
      ],
      recommend: [
        {
          title: "秘制酱香排骨包",
          content:
            "三两排骨包选用价格最贵的精品小肋排入馅，加入了芸豆和三两独家的秘制酱汁，面香、豆香、肉香、骨香，越吃越过瘾。",
          price: "¥3.5",
          url: require("../assets/products/image/组3.jpg")
        },
        {
          title: "秘制菌菇鲜肉包",
          content:
            "三两排骨包选用价格最贵的精品小肋排入馅，加入了芸豆和三两独家的秘制酱汁，面香、豆香、肉香、骨香，越吃越过瘾。",
          price: "¥4.5",
          url: require("../assets/products/image/组3.jpg")
        },
        {
          title: "秘制奥尔良鸡肉包",
          content:
            "三两排骨包选用价格最贵的精品小肋排入馅，加入了芸豆和三两独家的秘制酱汁，面香、豆香、肉香、骨香，越吃越过瘾。",
          price: "¥5.5",
          url: require("../assets/products/image/组3.jpg")
        }
      ],
      recommend_show: {
        title: "",
        content: "",
        price: ""
      },
      baozi: [],
      baozi_display_array: [],
      baozi_display_array_to_show: [],
      other: [],
      other_display_array: [],
      other_display_array_to_show: [],
      hot_display_array_to_show: [],
      baozi_show: true,
      other_show: false,
      baozi_indicator_count: 1,
      other_indicator_count: 1,
      sub_nav_image: require("../assets/products/image/组1.jpg"),

      materials_image01: require("../assets/products/image/组5.jpg"),
      materials_image02: require("../assets/products/image/组5.jpg"),
      materials_image03: require("../assets/products/image/组5.jpg"),
      materials_image04: require("../assets/products/image/组5.jpg"),

      idea_image01: require("../assets/products/image/组6.jpg"),
      idea_image02: require("../assets/products/image/组6.jpg")
    };
  },
  created() {
    this.getProducts();
    this.recommend_show.title = this.hot_display_array_to_show[0].product_name;
    this.recommend_show.content = this.hot_display_array_to_show[0].product_title;
    this.recommend_show.price = this.hot_display_array_to_show[0].product_price;
    // 根据包子的数量处理数组
    let baozi_length = this.baozi.length;
    this.baozi_indicator_count =
      Math.ceil(baozi_length / 8) > 1 ? Math.ceil(baozi_length / 8) : 1;
    for (let i = 0; i < this.baozi_indicator_count; i++) {
      this.baozi_display_array.push(this.baozi.slice(0, 8));
      for (let j = 0; j < 8; j++) {
        this.baozi.shift();
      }
    }
    this.baozi_display_array_to_show = this.baozi_display_array[0];

    // 根据其他的数量处理数组
    let other_length = this.other.length;
    this.other_indicator_count =
      Math.ceil(other_length / 8) > 1 ? Math.ceil(other_length / 8) : 1;
    for (let i = 0; i < this.other_indicator_count; i++) {
      this.other_display_array.push(this.other.slice(0, 8));
      for (let j = 0; j < 8; j++) {
        this.other.shift();
      }
    }
    this.other_display_array_to_show = this.other_display_array[0];
    window.addEventListener("scroll", this.scroll_listener, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scroll_listener, true);
  },
  mounted() {
    this.initScroll();
  },
  methods: {
    // 获取包子列表
    getProducts() {
      productGet(this.paramsBaozi).then(res => {
        this.baozi_display_array_to_show = res.data.results;
      });
      productGet(this.paramsOther).then(res => {
        this.other_display_array_to_show = res.data.results;
      });
      productGet(this.paramsHotBaozi).then(res => {
        this.hot_display_array_to_show = res.data.results;
      });
    },
    // mounted初始化scroll
    initScroll() {
      document.documentElement.scrollTop = 0;
    },
    // 滚动事件检测
    scroll_listener() {
      let scrolled_distance = document.documentElement.scrollTop;
      if (scrolled_distance >= 40) {
        this.show = false;
        // eslint-disable-next-line no-console
        // console.log(scrolled_distance);
      } else {
        this.show = true;
        this.sub_show = true;
      }
      if (scrolled_distance >= 440) {
        this.sub_show = false;
        this.sub_title_show = true;
      } else {
        this.sub_show = true;
        this.sub_title_show = false;
      }
    },
    to_sec(selector) {
      let anchor = this.$el.querySelector(`${selector}`);

      // eslint-disable-next-line no-console
      // console.log(anchor);
      // 获取该元素的距顶部的距离
      let total =
        selector == "b"
          ? document.body.scrollHeight - 100
          : anchor.offsetTop - 100;

      // 平滑滚动，时长500ms，每10ms一跳，共50跳
      // 获取当前滚动条与窗体顶部的距离
      let distance =
        document.documentElement.scrollTop || document.body.scrollTop;
      // total = selector == "b" ? document.body.scrollHeight : distance;
      let step = total / 50;
      function smoothDown() {
        if (distance < total) {
          distance += step;
          document.body.scrollTop = distance;
          document.documentElement.scrollTop = distance;
          setTimeout(smoothDown, 1);
        } else {
          window.clearInterval(timeout);
          // 限制滚动停止时的距离
          document.body.scrollTop = total;
          document.documentElement.scrollTop = total;
        }
      }
      let timeout = window.setInterval(smoothDown, 100);
    },
    // 轮播图切换时旁边的detail切换
    carousalchange(current_index) {
      this.recommend_show.title = this.hot_display_array_to_show[
        current_index
      ].product_name;
      this.recommend_show.content = this.hot_display_array_to_show[
        current_index
      ].product_title;
      this.recommend_show.price = this.hot_display_array_to_show[
        current_index
      ].product_price;
      // eslint-disable-next-line no-console
      // console.log(current_index);
    },
    // 控制包子显示
    baozi_indicator_click(index) {
      this.baozi_display_array_to_show = this.baozi_display_array[index - 1];
      for (let i = 0; i < this.baozi_indicator_count; i++) {
        if (i != index - 1) {
          this.$refs.baozi_indicator_circle_item[i].style.background =
            "transparent";
        } else {
          this.$refs.baozi_indicator_circle_item[i].style.background =
            "#231815";
        }
      }
    },
    // 控制其他显示
    other_indicator_click(index) {
      this.other_display_array_to_show = this.other_display_array[index - 1];
      for (let i = 0; i < this.other_indicator_count; i++) {
        if (i != index - 1) {
          this.$refs.other_indicator_circle_item[i].style.background =
            "transparent";
        } else {
          this.$refs.other_indicator_circle_item[i].style.background =
            "#231815";
        }
      }
    },
    // 轮播图左移
    translateleft() {
      let temp_obj = this.carousal.pop();
      this.carousal.unshift(temp_obj);
    },
    // 轮播图右移
    translateright() {
      let temp_obj = this.carousal.shift();
      this.carousal.push(temp_obj);
    },
    // 包子show 其他hidden
    baozi_display() {
      this.baozi_show = true;
      this.other_show = false;
    },
    // 包子show 其他hidden
    other_display() {
      this.baozi_show = false;
      this.other_show = true;
    }
  }
};
</script>

<style lang="less" scoped>
.about_us {
  .sub_nav {
    width: 100%;
    height: fit-content;

    .img {
      position: relative;
      background: greenyellow;
      width: 100%;
      height: 300px;

      .front_title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: front_title 2s;
        cursor: default;

        @keyframes front_title {
          from {
            opacity: 0;
            transform: translate(-50%, 50%);
          }
        }

        p {
          color: #ffffff;
          margin: 0;
          text-align: center;

          &:first-child {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 23px;
          }
          &:last-child {
            font-size: 16px;
            font-weight: 400;
          }
        }
      }
    }

    .sub_title {
      background: #f5f5f5;
      padding: 10px 0;

      div {
        margin: auto;
        display: flex;
        // max-width: 1200px;
        width: fit-content;

        span {
          position: relative;
          box-sizing: border-box;
          display: block;
          width: 130px;
          height: 38px;
          line-height: 38px;
          margin-right: 67px;
          text-align: center;
          z-index: 0;
          cursor: pointer;
          transition: all 0.3s;

          &:last-child {
            margin-right: 0;
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 130px;
            height: 38px;
            opacity: 0;
            background: hsl(#e53832, 100%, 100%);
            transform: scaleX(0);
            z-index: -1;
            transition: all 0.3s;
          }

          &:hover {
            background: transparent;
            color: #ffffff;

            &::before {
              opacity: 1;
              transform: scaleX(1);
            }
          }
        }
      }
    }
    .sub_title_show {
      position: fixed;
      width: 100%;
      top: 0;
      background: #f5f5f5;
      padding: 10px 0;
      z-index: 1000;
      box-shadow: 0 2px 10px 2px hsl(#222222, 100%, 100%);
      transition: all 1s;

      &.ceiling_transition-enter,
      &.ceiling_transition-leave-to {
        transform: translate(0, -100%);
        transition-timing-function: cubic-bezier(0, 0.57, 0.44, 1.97);
      }

      div {
        margin: auto;
        display: flex;
        max-width: 1200px;
        width: fit-content;

        span {
          position: relative;
          box-sizing: border-box;
          display: block;
          width: 130px;
          height: 38px;
          line-height: 38px;
          margin-right: 67px;
          text-align: center;
          z-index: 0;
          cursor: pointer;
          transition: all 0.3s;

          &:last-child {
            margin-right: 0;
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 130px;
            height: 38px;
            opacity: 0;
            background: hsl(#e53832, 100%, 100%);
            transform: scaleX(0);
            z-index: -1;
            transition: all 0.3s;
          }

          &:hover {
            background: transparent;
            color: #ffffff;

            &::before {
              opacity: 1;
              transform: scaleX(1);
            }
          }
        }
      }
    }
  }

  .background {
    max-width: 1200px;
    margin: auto;
    margin-top: 57px;
    .title01 {
      margin: 0;
      font-size: 36px;
      font-weight: bold;
      color: #333333;
      text-align: center;
    }
    .title02 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #231815;
      text-align: center;
      margin-top: 17px;
    }
    .title03 {
      width: 36px;
      height: 2px;
      background: #2f2d2c;
      margin: auto;
      margin-top: 20px;
    }
    .title04 {
      margin: 0;
      font-size: 16px;
      font-weight: 400;
      color: #4c4948;
      text-align: center;
      margin-top: 29px;
    }
    .carousel_content {
      margin: 0;
      margin-top: 34px;
      margin-bottom: 65px;
      display: flex;

      .carousel {
        position: relative;
        width: 741px;
        height: 342px;
        background: #f1f1f1;

        .el-carousel__item {
          height: 342px;
        }

        & /deep/ .el-carousel__indicators--outside {
          position: absolute;
          width: fit-content;
          left: 600px;
          bottom: 15px;

          .is-active {
            .el-carousel__button {
              background: #db392b;
            }
          }
        }

        & /deep/ .el-carousel__button {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          border: 1px solid #db392b;
          background: transparent;
        }
      }
      .recomend_show {
        width: 459px;
        height: 342px;
        background: #d83b2a;
        padding: 50px 66px 43px 58px;
        box-sizing: border-box;

        .recomend_show_p1 {
          margin: 0;
          border: 1px solid #ffffff;
          background: #d83b2a;
          color: #ffffff;
          text-align: center;
          padding: 7px 15px 8px 15px;
          width: 132px;
          font-size: 26px;
          font-weight: 500;
          margin-bottom: 16px;
        }
        .recomend_show_p2 {
          margin: 0;
          font-size: 36px;
          font-weight: bold;
          color: #fff;
          margin-bottom: 10px;
        }
        .recomend_show_p3 {
          margin: 0;
          font-size: 16px;
          font-weight: 400;
          line-height: 28px;
          color: #fff;
          margin-bottom: 15px;
        }
        .recomend_show_p4 {
          margin: 0;
          font-size: 26px;
          font-weight: 400;
          line-height: 28px;
          color: #fff;
        }
      }
    }
  }

  .baozi_other_show {
    background: #f1f1f1;
    padding: 30px 0 60px 0;

    .select {
      display: flex;
      margin: auto;
      width: fit-content;

      div {
        width: 72px;
        height: 67px;
        box-sizing: border-box;
        font-size: 36px;
        font-weight: bold;
        color: #595757;
        cursor: pointer;
        margin-right: 50px;

        &:last-child {
          margin-right: 0;
        }

        &:hover {
          color: #db392b;
          border-bottom: 4px solid #db392b;
        }
      }
    }

    .display {
      .baozi_show {
        // margin: 0;
        margin: auto;
        width: 1200px;
        height: 684px;
        display: flex;
        flex-wrap: wrap;
        .el_card-item {
          width: 282px;
          height: 309px;
          margin-right: 21px;
          margin-top: 31px;

          &:nth-child(4n) {
            margin-right: 0;
          }

          img {
            width: 100%;
            height: 176px;
            border-style: none;
            border: 0;
          }

          .el_card_item_content {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 38px 42px 45px 32px;

            p {
              margin: 0;

              &:first-child {
                font-size: 20px;
                font-weight: 600;
                margin-bottom: 14px;
              }
              &:last-child {
                font-size: 16px;
                font-weight: 400;
                line-height: 28px;
              }
            }
          }
        }
      }

      .indicator_circle {
        margin: 0;
        margin: auto;
        width: fit-content;
        height: fit-content;
        margin-top: 32px;
        display: flex;
        text-align: center;

        .indicator_circle_item {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: transparent;
          border: 1px solid #231815;
          cursor: pointer;
          margin-right: 20px;

          &:first-child {
            background: #231815;
          }

          &:last-child {
            margin-right: 0;
          }

          &:hover {
            background: #231815;
          }
        }
      }
    }
  }

  .selected_materials {
    .title01 {
      margin: 0;
      margin-top: 66px;
      font-size: 36px;
      font-weight: bold;
      color: #333333;
      text-align: center;
    }
    .title02 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #231815;
      text-align: center;
      margin-top: 17px;
    }
    .title03 {
      width: 36px;
      height: 2px;
      background: #2f2d2c;
      margin: auto;
      margin-top: 20px;
    }
    .title04 {
      margin: 0;
      line-height: 28px;
      font-size: 16px;
      font-weight: 400;
      color: #4c4948;
      text-align: center;
      margin-top: 29px;
    }
    .title05 {
      display: block;
      box-sizing: border-box;
      margin: auto;
      margin-top: 30px;
      width: 189px;
      padding: 11px 28px 10px 29px;
      font-size: 26px;
      font-weight: 500;
      border: 1px solid #231815;
    }
    .materials_display {
      display: flex;
      flex-wrap: wrap;
      max-width: 1200px;
      margin: 0 auto;
      margin-bottom: 65px;

      .materials {
        margin: auto;
        margin-top: 35px;
        max-width: 1200px;
        display: flex;
        background: #f1f1f1;

        .img {
          width: 296px;
          height: 362px;
          background: red;
        }

        .materials_show {
          width: 284px;
          box-sizing: border-box;
          padding: 49px 43px 0 33px;

          .materials_title01 {
            margin: 0;
            border: 1px solid #d83b2a;
            width: fit-content;
            font-size: 26px;
            font-weight: 500;
            padding: 10px 17px 10px 18px;
            color: #d83b2a;
          }
          .materials_title02 {
            margin: 0;
            margin-top: 33px;
            font-size: 20px;
            font-weight: 400;
          }
          .materials_title03 {
            margin: 0;
            margin-top: 38px;
            font-size: 16px;
            font-weight: 400;
          }
          .materials_title04 {
            margin-top: 44px;
            width: 42px;
            height: 2px;
            background: #d83b2a;
          }
        }
      }
    }
  }

  .idea {
    background: #f5f5f5;
    padding: 29px 0 31px 0;

    .title01 {
      margin: 0;
      font-size: 36px;
      font-weight: bold;
      color: #333333;
      text-align: center;
      // margin-top: 28px;
    }
    .title02 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #231815;
      text-align: center;
      margin-top: 17px;
    }
    .title03 {
      width: 36px;
      height: 2px;
      background: #2f2d2c;
      margin: auto;
      margin-top: 20px;
    }
    .title04 {
      margin: 0;
      font-size: 16px;
      font-weight: 400;
      color: #4c4948;
      text-align: center;
      margin-top: 29px;
    }

    .materials {
      margin: auto;
      margin-top: 35px;
      max-width: 1200px;
      display: flex;
      justify-content: space-between;

      .img {
        width: 600px;
        height: 338px;
        background: red;
      }

      .materials_show {
        width: 600px;
        background: #ffffff;
        box-sizing: border-box;
        padding: 0px 153px 0px 53px;

        .materials_title01 {
          margin: 0;
          width: fit-content;
          margin-top: 99px;
          font-size: 26px;
          font-weight: bold;
        }
        .materials_title02 {
          margin: 0;
          margin-top: 11px;
          font-size: 20px;
          font-weight: 400;
        }
        .materials_title03 {
          margin: 0;
          margin-top: 37px;
          font-size: 16px;
          font-weight: 400;
          line-height: 28px;
        }
      }
    }
    .assistant {
      margin: auto;
      margin-top: 35px;
      max-width: 1200px;
      display: flex;
      justify-content: space-between;

      .img {
        width: 600px;
        height: 338px;
        background: red;
      }

      .assistant_show {
        width: 600px;
        background: #ffffff;
        box-sizing: border-box;
        padding: 0px 153px 0px 53px;

        .assistant_title01 {
          margin: 0;
          width: fit-content;
          margin-top: 99px;
          font-size: 26px;
          font-weight: bold;
        }
        .assistant_title02 {
          margin: 0;
          margin-top: 11px;
          font-size: 20px;
          font-weight: 400;
        }
        .assistant_title03 {
          margin: 0;
          margin-top: 37px;
          font-size: 16px;
          font-weight: 400;
          line-height: 28px;
        }
      }
    }
  }
}
</style>
